<template>
  <div class="container">
    <Swiper/>
    <!-- 广告 -->
    <div class="advertisement">
      <div class="recommend">
        <div>
          <img v-lazy="'/img/ads/ads-1.gif'" alt="">
        </div>
        <div>
          <img v-lazy="'/img/ads/ads-2.gif'" alt="">
        </div>
        <div>
          <img v-lazy="'/img/ads/ads-3.gif'" alt="">
        </div>
        <div>
          <img v-lazy="'/img/ads/ads-4.gif'" alt="">
        </div>
      </div>
      <div class="advertisement_img"></div>
    </div>
    <!-- 商品 -->
    <!-- 优化，使用异步加载组件 不会-->
    <div class="commodity" v-for="(item,index) in classifyGoods" :key="index">
      <div class="commodity_container">
          <div class="title">{{item.content}}</div>
          <div class="phone_container">
              <div class="left">
                <img src="/img/mix-alpha.jpg" alt="" srcset="">
              </div>
               <div class="right">
                <div class="phone" v-for="(ele,index) in item" :key="index">
                    <div class="phone_img" @click="toDetail(ele)">
                        <img v-lazy="ele.s_photos[0].path" alt="">
                    </div>
                    <p class="text">{{ele.name}}</p>
                    <p class="tel">{{ele.desc}}</p>
                    <p class="price">
                      {{ele.price | currency(ele.price)}}
                        <a href="javascript:;" class="buy" @click="Cart(ele.id)"></a>
                    </p>
                </div>
              </div> 
          </div>
      </div>
    </div>

    <!-- 服务 -->
    <div class="service">
      <div class="service_container">
        <div>
          <i class="icon">
            <img src="/img/icon-setting.png" alt="">
          </i>预约维修服务
        </div>
        <div>
          <i class="icon">
            <img src="/img/icon-7day.png" alt="">
          </i>7天无理由退货
        </div>
        <div>
          <i class="icon">
            <img src="/img/icon-15day.png" alt="">
          </i>15天免费换货
        </div>
        <div>
          <i class="icon">
            <img src="/img/icon-post.png" alt="">
          </i>满150元包邮
        </div>
      </div>
    </div>
    <!-- 弹窗 -->
    <Modal :showModal="showModal" title="提示" @submit="goTo()" @cancel="showModal = false" btnType="3">
      <template v-slot:hello>
        <slot name="body">
          <p>商品添加成功!</p>
        </slot>
      </template>
      
    </Modal>
  </div>
</template>

<script>
import Swiper from '../components/Index/Swiper'
import Modal from '../components/Modal'
import {Data,get} from '../assets/js/request'
import http from '../assets/js/http'
import api from '../assets/js/api'
export default {
  data(){
    return {
      showModal:false,
      sideItems: [],
      num:0,
      classifyGoods:[],
      index:0,
      classify_id:[],
      timer:null,
    }
  },
  components:{
    Swiper,
    Modal,
    
  },
  async created(){
        // let classify = await http.get(api.classify)
        let classify = await Data('get','classify',{project_id:41})
        classify.map((ele,index) => {
            //添加所有分类进sideItems
            this.sideItems.push({id:index,content:ele.name,classify_id:ele.id,project_id:ele.project_id})
            this.classify_id.push(ele.id)
        })
        //分类好的商品
        // this.sideItems.map(async (ele,index) => {
        //     let res = await Data('get','productList',{classify_id:ele.classify_id,project_id:41})
        //     res.rows.content = ele.content
        //     // console.log(res.rows.content);
        //     this.classifyGoods.push(res.rows)
        // })


  },
  mounted(){
    let prevTime = new Date().getTime();
    window.addEventListener('scroll',() => {
      let nowTime = new Date().getTime();
      if(nowTime - prevTime > 800){

        this.handleScroll()

        prevTime = nowTime;
      }
    } );
  },
  methods:{
      toDetail(val){
        console.log(val,"val");
        this.$router.push({name:'ShopShow',params:{id:val.id}})
          // this.$router.push({name:'product',params:{id:val}})
      },
      // 点击添加到购物车
      async Cart(id){
          // // console.log(id);
          console.log(id);
          let res = await Data('post','cart',{goods_id: id,num: 1})
          this.showModal = true
      },
      // 弹窗点击确定跳转
      goTo(){
        console.log(this.sideItems[0].project_id);
        this.$router.push({name:'cart',params:{project_id:this.sideItems[0].project_id}})
      },
      //
      async getData(){
        //获取商品列表
        let classify = await Data('get','classify')
        classify.map( async (ele,index) => {
            //添加所有分类进sideItems
            this.sideItems.push({id:index,content:ele.name,classify_id:ele.id,project_id:ele.project_id})
        })
        console.log(classify);
        // 分类好的商品 已改成懒加载
        // this.sideItems.forEach(async (ele,index) => {
        //     let res = await Data('get','productList',{classify_id:ele.classify_id})
        //     res.rows.content = ele.content
        //     this.classifyGoods[index] = res.rows
        //     console.log(res.rows);
        // })
      },
      async handleScroll(){
         // 滚动的高度
        const scrollTop = (window.srcElement ? window.srcElement.documentElement.scrollTop : false) ||
        window.pageYOffset ||  (window.srcElement ? window.srcElement.body.scrollTop : 0);
        // 视窗高度
        const clientHeight = (window.srcElement && window.srcElement.documentElement.clientHeight) ||
        document.body.clientHeight;
        // 页面高度
        const scrollHeight = (window.srcElement && window.srcElement.documentElement.scrollHeight) ||
        document.body.scrollHeight;
        // 距离页面底部的高度
        const height = scrollHeight - scrollTop - clientHeight;

        //根据滚动条高度请求数据
        if(scrollTop + clientHeight > scrollHeight/40 && this.index<this.classify_id.length){
          console.log(this.index);
          let res = await Data('get','productList',{classify_id:this.classify_id[this.index],project_id:41})
          res.rows.content = this.sideItems[this.index].content
          // console.log(res.rows);
          this.classifyGoods.push(res.rows)
          this.index++
        }
        
      }
  },
  filters:{
      currency(val){
        return '￥'+val.toFixed(2)+'元';
      }
  }
}
</script>

<style lang="scss" scoped>
.container{
    width: 100%;
    background-color: black;
    .advertisement{
      height: 490px;
      width: 1226px;
      margin-left: auto;
      margin-right: auto;
      padding-top: 15px;
      .recommend{
        display: flex;
        justify-content: space-between;
        div{
          width: 24%;
        }
        img{
          width: 100%;
          height: 100%;
        }
      }
      .advertisement_img{
        margin-top: 30px;
        width: 100%;
        height: 400px;
        background-image: url('/img/banner-1.jpg');
        background-size: 100% 100%;
      }
    }
    .commodity{
        width: 100%;
        height: 800px;
        background-color: #414345;
        // margin-top: 50px;
        .commodity_container{
            width: 1226px;
            height:100%;
            margin: 0 auto;
            .title{
                line-height: 70px;
                // font-weight: 700;
                font-size: 24px;
                color:white;
                padding-left: 30px;
            }
            .phone_container{
                width: 100%;
                height: 620px;
                display: flex;
                justify-content: space-between;
                .left{
                    width: 225px;
                    height: 710px;
                    img{
                      width: 100%;
                      height: 100%;
                    }
                }
                .right{
                    width: 985px;
                    display: flex;
                    justify-content: space-between;
                    flex-wrap: wrap;
                    flex-direction: row;
                    height: 710px;
                    color:white;
                    .phone{
                        display: flex;
                        flex-direction: column;
                        text-align: center;
                        background-color: #232323;
                        height: 350px;
                        width: 235px;
                        margin-bottom: 10px;
                        img{
                            width: 100%;
                            height: 100%;
                        }
                        .new{
                            width: 65px;
                            line-height: 25px;
                            margin: 0 auto;
                            background-color: #7ecf68;
                        }
                        .phone_img{

                            width: 200px;
                            height: 230px;
                            // margin-top: 20px;
                            margin: 0 auto 15px;
                        }
                        .text{
                            font-size: 16px;
                            font-weight: 700;
                        }
                        .tel{
                            margin-top: 10px;
                        }
                        .price{
                            color: red;
                            font-size: 16px;
                            padding-top: 10px;
                            .buy{
                                display: inline-block;
                                width: 20px;
                                height: 16px;
                                background: url("/img/icon-cart.png") no-repeat;
                                background-size: 100% 100%;
                                &:hover{
                                  background: url("/img/icon-cart-hover.png") no-repeat;
                                  background-size: 100% 100%;
                                }
                            }
                        }
                        &:hover{
                          box-shadow: 0 26px 40px -24px #c6ffdd;
                          transform: translateY(-5px);
                          transition: all 0.5s;
                        }
                    }
                }
            }
        }
    }
    .service{
      width: 100%;
      text-align: center;
      border-bottom: solid 4px #ffffff;
      color: white;
      .service_container{
          width: 1226px;
          margin: 0 auto;
          display: flex;
          justify-content: space-around;
          div{
              width: 305px;
              line-height: 85px;
              position: relative;
              
              i{
                width: 20px;
                height: 20px;
                display: inline-block;
                img{width: 100%; height: 100%;}
                vertical-align:sub;
                margin-right: 5px;
              }
              &::after{
                position: absolute;
                right: 0;
                top: 30%;
                content: '';
                height: 34px;
                width: 1px;
                background-color: #f5f5f5;
              }
              &:last-child::after{
                  display: none;
              }
          }
      }
      
    }
}
</style>